<template>
	<view class="container">
		<view v-if="status=='0'">
			<view class="top-box">
				<view class="u-flex">
					<image style="height: 88rpx;width: 88rpx;border-radius: 50%;" :src="serviceInfo.image"></image>
					<view class="name">{{serviceInfo.nickname}}</view>
				</view>
				<view class="liyu-zhong">
					<view class="img-box">
						<image style="height: 316rpx;width: 316rpx;" :src="serviceInfo.qrcode"></image>
					</view>
			<!-- 		<view class="men-dian" @tap="jump('/pages/index/courtesy/stores',{id:serviceInfo.id})">
						选择门店
					</view> -->
						<button @tap="jump('/pages/index/courtesy/stores',{id:serviceInfo.id})" class="u-reset-button dianBtn" >选择门店</button>
				</view>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="title">
					使用规则
				</view>
				<view class="cont">
					选择门店激活后使用，激活后有效期40天，复购同一产
					品客延长40天，星耀会员无法使用期限
				</view>
			</view>
		</view>
		<view v-if="status=='1' || status=='2' ">
			<view class="top-box">
				<view class="u-flex">
					<image style="height: 88rpx;width: 88rpx;border-radius: 50%;" :src="serviceInfo.image"></image>
					<view class="name">{{serviceInfo.nickname}}</view>
				</view>
				<view class="liyu-zhong1">
					<view class="time" v-if="status=='1'">预计使用时间
						{{ $u.timeFormat(serviceInfo.reservetime, 'yyyy-mm-dd') }}</view>
					<view class="time" v-if="status=='2'">已使用，不可再次使用哦~</view>
					<view class="img-box">
						<image style="height: 316rpx;width: 316rpx;" :src="serviceInfo.qrcode"></image>
					</view>
					<view class="dian-name">
						{{serviceInfo.store_name?serviceInfo.store_name:'无'}}
					</view>
				</view>
				<view class="u-flex" style="margin-top: 20rpx;">
					<view><text class="zuo">项目：</text><text
							class="you">{{serviceInfo.project_name?serviceInfo.project_name:'无'}}</text></view>
					<view style="margin-left: 80rpx;"><text class="zuo">技师：</text><text
							class="you">{{serviceInfo.waiter_name?serviceInfo.waiter_name:'无'}}</text></view>
				</view>
				<view style="margin-top: 10rpx;">
					<view><text class="zuo">店铺地址：</text>
					<text class="you">{{serviceInfo.store_province_name}}{{serviceInfo.store_area_name}} {{serviceInfo.store_city_name}}</text></view>
				</view>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="title">
					使用规则
				</view>
				<view class="cont">
					选择门店激活后使用，激活后有效期40天，复购同一产
					品客延长40天，星耀会员无法使用期限
				</view>
			</view>
		</view>
		<view v-if="status=='1'" style="display: flex; justify-content: space-around;margin-top:48rpx;">
			<view class="send">发送给微信好友</view>
			<view class="save">保存到相册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: '1',
				page: 1,
				lastPage: 1,
				loadStatus: 'loadmore',
				isEmpty: false,
				serviceInfo: '',
				id: ''
			};
		},
		onLoad(options) {
			console.log('options', options)
			this.id = options.id
			this.status = options.state
			this.serviceDetail()
		},
		methods: {
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			// 获取礼遇详情
			serviceDetail() {
				let that = this;
				that.loadStatus = 'loading';
				let data = {
					id: that.id,
				}
				that.$https('sendgoods.serviceDetail', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.serviceInfo = res.data
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 32rpx;
	}

	.top-box {
		height: 756rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50rpx;
		margin-left: 32rpx;
	}

	.img-box {
		width: 352rpx;
		height: 352rpx;
		background: #FFFFFF;
		border: 6rpx solid #333333;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.men-dian {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #010101;
		margin-top: 48rpx;
	}

	.liyu-zhong {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
	}

	.liyu-zhong1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #010101;
	}

	.cont {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #8E8E8E;
		margin-top: 20rpx;
	}

	.time {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #010101;
		margin-bottom: 16rpx;
	}

	.dian-name {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #010101;
		margin-top: 44rpx;
	}

	.zuo {
		color: #8E8E8E;
		font-size: 28rpx;
	}

	.you {
		color: #010101;
		font-size: 28rpx;
	}

	.send {
		width: 256rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		color: #010100;
		line-height: 64rpx;
		text-align: center;
	}

	.save {
		width: 256rpx;
		height: 64rpx;
		background: #010100;
		border-radius: 4rpx;
		line-height: 64rpx;
		color: #ffffff;
		text-align: center;
	}
	.dianBtn {
		width: 160rpx;
		line-height: 56rpx;
		background: black;
		// background: linear-gradient(90deg, #e9b461, #eecc89);
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #ffffff;
		margin-top: 48rpx;
	}
</style>
